<template>
  <!-- 模态框 -->
  <div id="addTask" v-if="isAdd">
    <div class="modal show" aria-modal="true" style="display: block">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">
              <slot></slot>
            </h4>
            <button type="button" class="btn-close" @click="hideDialog"></button>
          </div>
          <!-- 模态框内容 -->
          <div class="modal-body text-start">
            <div class="input-group mb-3">
              <span class="input-group-text">定时器名称</span>
              <input type="text" class="form-control" v-model="task.name" placeholder="请输入定时器名称" name="name">
            </div>
            <div class="input-group mb-3 mt-2">
              <span class="input-group-text">描述说明&nbsp;&nbsp;&nbsp;&nbsp; </span>
              <input type="text" class="form-control" v-model="task.desc" placeholder="请输入描述" name="desc">
            </div>
            <div class="input-group mb-3 mt-2">
              <span class="input-group-text">触发器名称</span>
              <input type="text" class="form-control" v-model="task.trigger" placeholder="请输入触发名称" name="trigger">
            </div>
            <div class="input-group mb-3 mt-2 cron">
              <span class="input-group-text">cron表达式</span>
              <el-popover v-model="cronPopover" class="form-control" style="padding: 0">
                <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                <el-input style="border: none;" slot="reference" @click="cronPopover=true" v-model="task.cron"
                          placeholder="请输入cron表达式"></el-input>
              </el-popover>
              <span class="input-group-text btn-success" @click="openAlert">检查表达式</span>
            </div>
            <div class="mb-1 mt-2">
              <label for="comment" style="height: 2rem;">请输入执行脚本：</label>
              <el-menu
                class=""
                mode="horizontal"
                background-color="#0b5ed7"
                text-color="#fff"
                style="display: inline-block;height: 1.5rem;"
                @select="handleSelect"
              >
                <el-submenu index="0">
                  <template slot="title">插入脚本</template>
                  <el-submenu v-for="(item,index) in menus" :key="index" :index="item.name"
                              :disabled="item.children.length==0">
                    <template slot="title"> {{ item.name }}</template>
                    <el-menu-item v-for="child in item.children" :key="child.key"
                                  :index="child.key">{{ child.name }}
                    </el-menu-item>
                  </el-submenu>
                </el-submenu>
              </el-menu>
              <textarea class="form-control " rows="5" id="comment" v-model="task.script" name="script"></textarea>
            </div>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" @click="submitData">提交</button>
            <button type="button" class="btn btn-danger" @click="hideDialog">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop show"></div>
  </div>

</template>
<style>
.el-menu--horizontal>.el-submenu .el-submenu__title{
  font-size: 1rem;
  height: 2.2rem;
  line-height:2.2rem;
  width: 7rem;
}

</style>
<script>
import {cron} from 'vue-cron';
import {AJAX_CONST_MAP,AJAX_CONST_MENUS} from '@/assets/AjaxConst.js'

export default {
  name: "Add",
  components: {cron},
  data() {
    return {
      cronPopover: false,
      //显示隐藏控制
      isAdd: false,
      task: {
        id: "",
        name: "",
        desc: "",
        group: "javaScript",
        cron: "",
        trigger: "",
        script: ""
      },
      menus: AJAX_CONST_MENUS
    };
  },
  methods: {
    changeCron(val) {
      this.task.cron = val
    },
    showDialog: function () {
      this.isAdd = true
    },
    hideDialog: function () {
      this.isAdd = false
      //重置
      this.task.id = ""
      this.task.name = ""
      this.task.desc = ""
      this.task.group = "javaScript"
      this.task.cron = ""
      this.task.trigger = ""
      this.task.script = ""
    },
    submitData: function () {
      this.task.id = "" + new Date().getTime()
      let that = this;
      fetch("/quartz/createScriptTask", {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.task)
      }).then(res => res.json()).then(data => {
        console.log(data)
        if (!data.status) {

          alert("添加成功!")
          that.$emit("renderTaskList")
          that.hideDialog()
        } else {
          alert(data.error)
        }
        // console.log(data)

      }).catch(function (e) {
        console.log(e)
        alert(e)
      })
    },
    openAlert() {
      var that = this
      fetch("/quartz/getScheduleDateList?cron=" + this.task.cron).then(res => res.json()).then(data => {
        if (data == null || !data.status) {
          let txt = "校验失败:请检查表达式是否正确"
          let title = "CRON 表达式格式错误"
          if (data != null && data.length > 0) {
            title = "CRON 表达式校验成功"
            txt = "最近10次执行时间:<br>"
            for (let index in data) {
              txt += "<span>" + data[index] + "</span><br>"
            }
            ;
          }

          that.$alert(txt, title, {
            confirmButtonText: '确定',
            dangerouslyUseHTMLString: true
          });

        } else {
          alert(data.error)
        }
      })

    },
    InsertString(tbid, str) {
      const tb = document.getElementById(tbid);
      tb.focus();
      if (document.selection) {
        const r = document.selection.createRange();
        document.selection.empty();
        r.text = str;
        r.collapse();
        r.select();
      } else {
        const newstart = tb.selectionStart + str.length;
        this.task.script= tb.value.substr(0, tb.selectionStart) + str + tb.value.substring(tb.selectionEnd);
        tb.selectionStart = newstart;
        tb.selectionEnd = newstart;
      }
    },
    //选择复制值
    handleSelect(key, keyPath){
      console.log(key, keyPath);
      let text=AJAX_CONST_MAP[''+key]
      if(text){
        //插入脚本
        this.InsertString("comment",text)
      }

    }

  }
};
</script>
